<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
<!--        为了提高渲染的效率添加 key属性  key值不重复-->
        <li key="index" v-for="(item,index) in arr">{{item +'----'+ index}}</li>
    </ul>
    <input type="button" @click="addDept" value="add">
    <input type="button" @click="delDept" value="del">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            arr:["北分","南分","能源","发电"]
        },
        methods: {
            addDept() {
                //为数组添加新的元素
                this.arr.push("北京")
            },
            delDept() {
                //从数组的第一个删除元素
                this.arr.shift()
            }
        }
    })
</script>
</body>
</html>
